<template>
    <div class="device-list">
        <ul class="global-operation-list" style="margin-top: 20px;">
            <li class="global-operation-left">
                <ul class="global-filter-list">
                    <li class="global-filter-item">
                        <h2 class="global-filter-item-title">关键字：</h2>
                        <el-input v-model="searchForm.keyword" @change="getPost" placeholder="媒体类型名称"
                            clearable></el-input>
                    </li>
                    <li class="global-filter-item">
                        <el-button type="primary" class="global-filter-item-search"
                            :style="{ background: $store.state.theme.theme_color || '#03C192', border: 'none' }"
                            @click="rePosts()">搜索</el-button>
                    </li>
                    <li class="global-filter-item">
                        <el-button type="primary" class="global-filter-item-search" v-if="operationList.includes('add')"
                            @click="addMediaType">添加</el-button>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="global-table-content">
            <div class="global-table">
                <el-table :data="dataList" :header-cell-style="{
                            background: '#F6F7FA',
                            color: '#333',
                            height: '60px',
                        }" v-loading="tableLoading" :row-style="{ height: '0' }" :cell-style="{ padding: '3px' }"
                    max-height="700" border v-if="dataList && dataList.length > 0">
                    <el-table-column label="媒体类型名称" prop="name" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="icon" prop="iconPath">
                        <template slot-scope="scope">
                            <el-image v-if="scope.row.iconPath" style="width: 100px; height: 100px"
                                :src="scope.row.iconPath" fit="fill"
                                :preview-src-list="[scope.row.iconPath]"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="排序（从大到小）" prop="sort" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200px">
                        <template slot-scope="scope">
                            <div>
                                <el-button v-if="operationList.includes('update')" style="font-size: 14px;" type="text"
                                    @click="handleCommand(1, scope.row)">修改</el-button>
                            </div>
                            <div>
                                <el-popconfirm title="确定删除该值吗？" @confirm="handleCommand(2, scope.row)">
                                    <el-button slot="reference" v-if="operationList.includes('del')"
                                        style="font-size: 14px;" type="text">删除</el-button>
                                </el-popconfirm>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="no-data" v-else
                    style="height: calc(100vh - 130px - 80px);display: flex;align-items: center;justify-content: center;flex-direction: column">
                    <img style="width: 265px;height: 120px;margin-bottom: 32px" src="@/assets/images/tyNoData.png"
                        alt="" />
                    <div style="font-size: 16px;color: #A5A9B5">暂无数据~</div>
                </div>
            </div>
            <div class="global-page">
                <div class="global-page-left">
                </div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="pageSizes" :page-size="pageSize" :current-page="pageNum" background
                    layout="sizes, total, prev, pager, next" :total="total"></el-pagination>
            </div>
        </div>

        <!-- 新增编辑 -->
        <el-dialog :title="formTitle" :visible.sync="addMediaTypeDialogVisible" width="50%"
            :before-close="addMediaTypeHandleClose">
            <div>
                <el-form :model="addMediaTypeForm" :rules="addMediaTypeRules" ref="addMediaTypeForm">
                    <el-form-item label="媒体类型名称" prop="name" :label-width="formLabelWidth">
                        <el-input v-model="addMediaTypeForm.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="排序（从大到小）" prop="sort" :label-width="formLabelWidth">
                        <el-input v-model="addMediaTypeForm.sort" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="icon" prop="iconPath" :label-width="formLabelWidth">
                        <el-upload class="avatar-uploader" action="/checkorder/manager/pc/user/uploadFile"
                            :show-file-list="false" :data="{ token: $store.state.token }"
                            :on-success="handleAvatarSuccess">
                            <img v-if="addMediaTypeForm.iconPath" :src="addMediaTypeForm.iconPath" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"
                                style="height: 100px;width: 100px;line-height: 100px !important"></i>
                            <div slot="tip" class="el-upload__tip" style="color: #919baf">
                                只能上传jpg/png文件
                            </div>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addMediaTypeDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addMediaTypeSubmit">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
import APIMedia from "@/api/apiMedia";

export default {
    name: "mediaTypeMsg",
    props: {
        operationList: Array,
    },
    data() {
        return {
            tokenData: {
                token: localStorage.getItem("mujingtoken")
            },
            searchForm: {
                keyword: "",
                otherProjectType: null,
            },
            tableLoading: false,
            dataList: [],
            pageSize: 10,
            pageNum: 1,
            total: 0,
            pageSizes: [10, 20, 50, 100],
            formLabelWidth: '120px',
            otherProjectTypeList: [],
            addMediaTypeDialogVisible: false,
            addMediaTypeForm: {
                id: null,
                name: '',
                iconPath: '',
                sort: 1,
            },
            addMediaTypeRules: {
                name: { required: true, message: '请输入媒体类型名称', trigger: 'blur' },
                iconPath: { required: true, message: '请上传icon', trigger: 'blur' },
            },
            formTitle: '新增',
        };
    },
    activated() {
        this.pageNum = 1;
        this.dataList = [];
        this.getPost();
    },
    created() { },
    mounted() {
    },
    methods: {
        handleCommand(type, row) {
            if (type == 1) {
                this.addMediaTypeForm = row;
                this.addMediaTypeDialogVisible = true;
                this.formTitle = '修改';
            } else if (type == 2) {
                let params = {
                    id: row.id
                }
                APIMedia.delMediaType(params).then((res) => {
                    if (res.key === 1000) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.rePosts();
                    }
                    this.$bus.$emit("show-loading", false);
                });
            }
        },
        handleAvatarSuccess: function (e) {
            if (e.key == 1000) {
                this.addMediaTypeForm.iconPath = e.result.data;
                this.$message.success({
                    showClose: true,
                    message: "上传成功",
                    duration: 1500
                });
            }
        },
        addMediaTypeSubmit() {
            this.$refs['addMediaTypeForm'].validate((valid) => {
                if (valid) {
                    this.$bus.$emit("show-loading", true);
                    const params = this.addMediaTypeForm;
                    if (params.id) {
                        APIMedia.updateMediaType(params).then((res) => {
                            if (res.key === 1000) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.addMediaTypeDialogVisible = false;
                                this.rePosts();
                            }
                            this.$bus.$emit("show-loading", false);
                        });
                    } else {
                        APIMedia.addMediaType(params).then((res) => {
                            if (res.key === 1000) {
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                this.addMediaTypeDialogVisible = false;
                                this.rePosts();
                            }
                            this.$bus.$emit("show-loading", false);
                        });
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        addMediaTypeHandleClose() {
            this.addMediaTypeDialogVisible = false;
        },
        addMediaType() {
            this.formTitle = "新增";
            this.addMediaTypeForm = {
                id: null,
                name: '',
                iconPath: '',
                sort: 1,
            };
            this.addMediaTypeDialogVisible = true;
        },
        formatterTime(time) {
            if (time) {
                return this.$moment(new Date(time)).format("YYYY-MM-DD HH:mm:ss");
            } else {
                return "-";
            }
        },
        // 分页pageSize改变
        handleSizeChange(e) {
            this.pageSize = e;
            this.rePosts();
        },
        // 分页pageNum改变
        handleCurrentChange(e) {
            this.pageNum = e;
            this.getPost();
        },
        // 重新请求
        rePosts() {
            this.pageNum = 1;
            this.dataList = [];
            this.getPost();
        },
        getPost() {
            this.$bus.$emit("show-loading", true);
            const params = {
                token: this.$store.state.token,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            };
            if (this.searchForm.keyword) {
                params.keyword = this.searchForm.keyword;
            }
            APIMedia.getMediaTypeList(params).then((res) => {
                if (res.key === 1000) {
                    this.total = res.result.count;
                    res = res.result.list;
                    res.forEach(item => {
                        if (item.createTime) {
                            item.createDate = this.$moment(item.createTime).format("YYYY-MM-DD HH:mm");
                        }
                    })
                    this.dataList = res;
                }
                this.$bus.$emit("show-loading", false);
            });
        },
    },
};
</script>

<style>
.mask-img-del-size {
    width: 50px;
    text-align: center;
    height: 50px;
    margin: 25px;
}

.mask-img {
    position: absolute;
    margin-top: -100px;
    width: 100%;
    height: 100%;
    bottom: 0;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
    margin-left: -10px;
}

.banner-pic-sub .mask-img:hover {
    opacity: 1;
    cursor: pointer;
}

.el-upload__tip {
    color: #969799;
    margin-top: 0;
    height: 30px;
    line-height: 30px;
}

.avatar-uploader .el-upload .avatar-uploader-icon {
    width: 100px;
    height: 100px;
    line-height: 100px !important;
}
</style>

<style lang="sass">

.avatar-uploader-icon
  font-size: 28px
  color: #8c939d
  width: 178px
  height: 178px
  line-height: 178px !important
  text-align: center
.device-list
  padding-top: 26px
  @include container
.editDialog
  .el-dialog__header
    border-bottom: 1px solid #EFEFEF
    .el-dialog__headerbtn
      font-size: 20px
  .el-dialog__footer
    text-align: left
    margin-left: 120px

</style>
